<template>
  <div class="home">
    <ul class="btns">
      <li v-for="(item, index) in tdvBtns" :key="index">
        <el-button size="mini" @click="activeChartTime = item.chartTime;getTdvSrc()">{{item.title}}</el-button>
      </li>
      <li>
        <el-button size="mini" type="primary" @click="symbol = 'HKEXHSI';getTdvSrc();getEchartSrc();">恒生指数</el-button>
        <el-button size="mini" type="success" @click="symbol = 'CMENQ';getTdvSrc();getEchartSrc();">小纳指</el-button>
        <el-button size="mini" type="danger" @click="symbol = 'NYMEXCL';getTdvSrc();getEchartSrc();">美原油</el-button>
        <el-button size="mini" type="warning" @click="symbol = 'CFFEXIF';getTdvSrc();getEchartSrc();">沪深300</el-button>
      </li>
    </ul>
    <div class="tdv">
      <iframe
        class="tdv_iframe"
        :src="tdvSrc"
        frameborder="0"
        scrolling="no"
        width="100%"
        height="100%"
      ></iframe>
    </div>
    <div class="echart">
      <object
        class="echart_iframe"
        :data="echartSrc"
        frameborder="0"
        scrolling="no"
        width="400"
        height="300"
      ></object>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      symbol: "HKEXHSI",
      tdvBtns: [
        { title: "分时线", chartTime: "1m" },
        { title: "日线", chartTime: "dayk" },
        { title: "周线", chartTime: "week" },
        { title: "月线", chartTime: "monthk" },
        { title: "5分钟", chartTime: "pointsK5" },
        { title: "15分钟", chartTime: "pointsK15" },
        { title: "30分钟", chartTime: "pointsK30" },
        { title: "60分钟", chartTime: "pointsK60" }
      ],
      activeChartTime: '1m',
      tdvSrc: "",
      echartSrc: "",
    };
  },
  components: {},
  created() {
    this.getTdvSrc();
    this.getEchartSrc();
  },
  mounted() {},
  methods: {
    //http://119.23.48.240:8888/kdata/queryapi_tdview/charts.html?symbol=${symbol}#/nav=none&timeMark=dayk
    getTdvSrc() {
      this.tdvSrc = `http://119.23.48.240:8888/kdata/queryapi_tdview/charts.html?symbol=${
        this.symbol
      }#/nav=none&timeMark=${this.activeChartTime}`;
    },
    // http://119.23.48.240:8888/kdata/queryapi_sina/charts.html?symbol=${symbol}
    getEchartSrc() {
      this.echartSrc = `http://119.23.48.240:8888/kdata/queryapi_sina/charts.html?symbol=${
        this.symbol
      }`;
    }
  }
};
</script>

<style scoped lang="less">
.home {
  background: #333;
  .btns{
    display: flex;
    width: 80%;
    margin: 10px auto 0 auto;
  }
  .btns>li{
    margin-right: 20px;
  }
}
.tdv {
  width: 80%;
  margin: 0 auto;
  height: 500px;
}
.echart {
  width: 80%;
  margin: 0 auto;
}
</style>
